<template>
    <div class="stp">
        <el-form :model="stp3Form" status-icon :rules="stp2rules" ref="stp3Form" label-width="90px" size="medium">
            <el-form-item label="新密码:" prop="password">
                <el-input type="password" v-model="stp3Form.password" auto-complete="off" placeholder="密码由8-20个字符组成"
                          :maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="confirm">
                <el-input type="password" v-model="stp3Form.confirm" auto-complete="off"
                          placeholder="再次输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('stp3Form')">下一步</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    const reg = /^[\s\S]{8,20}$/;
    let verifycode = "1234";
    export default {
        data() {
            let checkpass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else if ( value.length > 0 && (value.length < 8 ||value.length > 20) || !reg.test(value)) {
                    callback(new Error('密码由8-20个字符组成'));
                } else if(value.length > 8 && value.length < 20 && reg.test(value)) {
                    callback();
                    this.$refs.stp3Form.validateField('confirm',function(valid){
                        if(!valid){
                            alert("submit");
                        }
                    });
                }
            };
            let checkCode = (rule, value, callback) => {
                if ( value.length > 0 && value!== this.stp3Form.password) {
                    callback(new Error('请输入上面的密码'));
                } else if(value === this.stp3Form.password) {
                    callback();
                    location.href = "#/complete";

                }
            };
            return {
                stp3Form: {
                    password: '',
                    confirm: ''
                },
                stp2rules: {
                    password: [
                        {validator: checkpass, trigger: 'blur'}
                    ],
                    confirm: [
                        {validator: checkCode, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs.stp3Form.validateField('password');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .stp{
        .el-form{
            width: 100%;
        }
    }
</style>
